<!-- 阵点图dom渲染 -->
<template>
  <div style='margin-top:40px;margin-left:40px;' id='demo_id'>
      <div class='demo_warp' @mousemove.capture="mousemove_fun($event,'demo_warp')" @mouseleave='mouseleave_fun'>
          <!-- 图样式 -->
          <div class='demo_y_warp' v-for='y in y_slice' :key='y' :style="{'border-bottom':`${y==y_slice?'1px dotted #ddd':''}`,height:`${y_height}px`}"><span>{{(y_max-(y_max/y_slice*y))%0.5==0?y_max-(y_max/y_slice*y):''}}</span></div>
          <div class='demo_x_warp'>
              <!-- x轴 -->
              <div><div style='border-right:none;'></div>2021</div>
              <div><div style='border-right:none;'></div>2022</div>
              <div><div style='border-right:none;'></div>2023</div>
              <div><div style='width:99%'></div>长期</div>
          </div>
          <!-- 对应x轴区 -->
          <div class='demo_inner_warp'>
              <div v-for='(data_item,data_index) in datas' :key='data_index' @mousemove="y_data_tooltip_showIndex = data_index" @mouseleave='y_data_tooltip_showIndex=-1'>
                  <!-- y列渲染数据 -->
                  <div class='y_data_inner_option' :style="{height:`${y_height}px`}" v-for='y_data in y_slice' :key='y_data'>
                      <div v-for='y_inner_Data,y_inner_index in data_item.data' :key="y_inner_index">
                          <div v-if='y_inner_Data.value>=(y_max-(y_max/y_slice*y_data))&&y_inner_Data.value<(y_max-(y_max/y_slice*(y_data-1)))' :style="{background:`${color[y_inner_Data.type]||'#ddd'}`}"></div>
                      </div>
                  </div>
                  <!-- 悬浮框 -->
                  <div class='y_data_tooltip' v-show='y_data_tooltip_showIndex==data_index'>
                      <div v-for='y_inner_Data,y_inner_index in data_item.data' :key="y_inner_index">
                          <div class='y_data_type' :style="{background:`${color[y_inner_Data.type]||'#ddd'}`}"></div>:{{y_inner_Data.value}}
                      </div>
                  </div>
              </div>
          </div>
          <!-- y，x虚线 -->
          <div class='y_dotted' v-show='x_y_show' :style="{left:x_position}"></div>
          <div class='x_dotted' v-show='x_y_show' :style="{top:y_position}"></div>
      </div>
  </div>
</template>

<script>

import obj from './dian'
export default {
  data () {
    return {
        datas:'',
        color:{
            1:'rgb(19, 98, 176)',
            2:'rgb(166,9,34)',
            3:'rgb(137,137,137)',
        },
        // y轴段数
        y_slice:33,
        //y轴max
        y_max:4.125,
        //y轴高度
        y_height:'',
        y_position:'',
        x_position:'',
        ele:'',
        x_y_show:false,
        //y_数据tooltip展示
        y_data_tooltip_showIndex:-1,
    };
  },

  components: {},

  computed: {},

  mounted(){
      this.ele = document.getElementById('demo_id')
      this.y_height = 300/this.y_slice;
      this.datas = obj;
  },

  methods: {
      mousemove_fun(e,className){
          this.x_y_show = true;
          this.y_position = e.y-this.ele.getBoundingClientRect().top+'px'
          this.x_position = e.x-this.ele.getBoundingClientRect().left+'px'
          if(e.y-this.ele.getBoundingClientRect().top>=300||e.x-this.ele.getBoundingClientRect().left>=400||e.y-this.ele.getBoundingClientRect().top<0||e.x-this.ele.getBoundingClientRect().left<0){
              this.x_y_show = false;
          }
      },
      mouseleave_fun(){
          this.x_y_show = false;
      }
  }
}

</script>
<style lang='less' scoped>
.demo_warp{
    width: 400px;
    height: 300px;
    position: relative;
    .demo_y_warp{
        width: 100%;
        // height: 9.4px;
        border-top:1px dotted #ddd;
        position: relative;
        box-sizing: border-box;
        >span{
            display: inline-block;
            width: 40px;
            position: absolute;
            font-size:12px;
            top:-2px;
            right:-33px;
            transform: scale(.5);
            text-align: left;
        }
    }
    .demo_x_warp{
        width: 100%;
        height:40px;
        position: absolute;
        bottom: -41px;
        border-top:1px solid #000;
        display: flex;
        justify-content: space-around;
        >div{
            width: 25%;
            text-align: center;
            line-height: 40px;
            >div{
                width: 100%;
                height:6px;
                position: relative;
                top:-6px;
                border:1px solid #000;
                border-bottom:none;
                border-top:none;
            }
        }
    }
    .demo_inner_warp{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0px;
        left:0px;
        display: flex;
        z-index: 1;
        >div{
            width: 25%;
            height:100%;
            position: relative;
            cursor:default;
            .y_data_inner_option{
                width:100%;
                display: flex;
                justify-content: center;
                align-items: center;
                >div{
                    height:4px;
                    >div{
                        width: 4px;
                        height:4px;
                        // border:1px solid #000;
                        border-radius:100%;
                        line-height: 15px;
                    }
                }
            }   
        }
    }
    .y_data_tooltip{
        width: 80%;
        padding:6px;
        position: absolute;
        opacity: .5;
        background-color: #fff;
        box-shadow:0 0 8px 0 #000;
        border-radius: 5px;
        top:30%;
        left:4px;
        // z-index: 0;
        >div{
            display: flex;
            align-items: center;
        }
        .y_data_type{
            width: 4px;
            height: 4px;
            border-radius:100%;
        }
    }
    .y_dotted{
        width: 1px;
        height:100%;
        position: absolute;
        border-left:1px dashed #000;
        top:0px;
        // z-index: 1;
    }
    .x_dotted{
        width: 100%;
        height: 1px;
        position: absolute;
        border-top:1px dashed #000;
        left:0px;
        // z-index: 1;
    }
}
</style>